<template>
    <Echart
     :options="options"
     :id="id"
     height="150px"
     width="100%"
    >
  </Echart>
</template>

<script>
import Echart from '@/common/echart'
export default {
  name: 'chart',
  components:{
      Echart
  },
  data() {
      return {
         options:{} 
      }
  },
  computed:{
  
  },
  props:{
      cdata:{
        type: Object,
       default: () => ({}),
      },
      id:String
  },
  watch:{
      cdata:{
         handler(newData){
         let title=newData.name
         this.options = {
           tooltip: {
             trigger: 'item',
           },
           series: [
            {
             name: '',
             type: 'gauge',
             radius:'100%',
             min: 0,
             max: 100,
             splitNumber: 12,
             detail: {
               formatter: '{r1|{value}}{r2|%}',
               color: 'auto',
               rich:{
                   r1:{
                       fontSize:12,
                       padding:[0,3,20,0]
                   },
                   r2:{
                       fontSize:12,
                       verticalAlign: "bottom",
                   }
               }
             },
             anchor: {
                 show: true,
                 showAbove: true,
                 size: 10,
                 itemStyle: {
                     borderWidth:2,
                     borderColor:"#2262E4",
                 }
             },
             progress: {
                 roundCap: true,
                 show: true,
                 width: 12
             },
             itemStyle: {
                 color: '#6acca3',
             },
             data: [{
               value: newData.percent,
               name: ''
             }],
             axisLine: {
                 roundCap: true,
                 lineStyle: {
                     width: 14,
                     color: [
                    [0.3, '#C23531'],
                    [0.7, '#63869E'],
                    [1,'#91C7AE']
                ]
                 }
             },
             splitLine: {
               show: false
             },
             axisTick: {
               show: false
             },
             axisLabel:{
                 show:false
             },
             zlevel:10,
           },{
                  name: '',
                  type: 'gauge',
                  splitNumber: 10, //刻度数量
                  min: 0,
                  max: 100,
                  radius: '92%', //图表尺寸
                  center: ['50%', '50%'],
                  zlevel:1,
                  axisLine: {
                      show: true,
                      lineStyle: {
                          width: 0,
                          shadowBlur: 0,
                          color: [
                        //    [0.2, '#23AFAF'],
                           [0.2, '#F45656'],
                           [0.4, '#2270DA'],
                           [0.6, '#E99D02'],
                        //    [1, '#F45656',]
                           [1, '#23AFAF',]
                         ],
                      }
                  },
                  axisTick: {
                      show: true,
                      lineStyle: {
                          color: 'auto',
                          width: 2
                      },
                      length: 10,
                      splitNumber: 5
                  },
                  splitLine: {
                      show: true,
                      length: 8,
                      lineStyle: {
                          color: 'auto',
                          width: 2
                      }
                  },
                  axisLabel: {
                     distance: 5,
                     color: '#9BA5BC',
                     fontSize: 12
                 },
                  pointer: { //仪表盘指针
                      show: 0,
                      length: '0%',
                      width: 1
                  },
                  anchor: {
                     show: true,
                     showAbove: true,
                     size: 25,
                     itemStyle: {
                         color:'#EAEBF1',
                     }
                 },
                  detail: {
                    show:true,
                    offsetCenter: [0, '90%'],
                    textStyle: {
                      fontSize: 14,
                      fontWeight:600,
                      color: '#909399',
                   },
                    formatter: function () {
                      return title;
                     },
                  },
                  data: []
              }]
          };        
         },
         immediate:true,
         deep:true
         }
      },
     methods:{ 
  
   }
 }
</script>

<style lang = "scss" scoped>

</style>
